import React, { useState } from 'react';
import { tableList, tableListDelete } from '../../../services/login';
import { Table, Space, message, Modal } from 'antd';
import { history } from 'umi';

// *-------------------------------------
export default function TableRendering(props) {
  const { list, paginationProps, AfterDeleting } = props;
  // *-------------------------------------------
  // todo 这是编辑按钮
  const editActivity = (record) => {
    history.push({
      pathname: `/createNewEvent`,
      search: `id=${record.id}`,
      state: {
        activityBasicId: record.activityBasicId,
      },
    });
  };

  // todo 这是 table 表
  const columns = [
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'activityBasicId',
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreated',
      key: 'gmtCreated',
    },
    {
      title: '活动时间',
      key: 'startDate',
      render: (text) => {
        return (
          <Space size="middle">
            <span>{text.startDate}</span>-<span>{text.endDate}</span>
          </Space>
        );
      },
    },
    {
      title: '状态',
      key: 'activityStatus',
      render: (text, record) => {
        const stateColor = [
          {},
          { name: '待审核', color: '#30a493' },
          { name: '进行中', color: '#8b35fb' },
          { name: '未开始', color: '#ccc' },
          { name: '已驳回', color: '#fe4e5c' },
          { name: '已结束', color: '#9f9f9f' },
          { name: '已关闭', color: '#9f9f9f' },
        ];
        return text.isDraft ? (
          <span style={{ color: '#9f9f9f' }}>草稿</span>
        ) : (
          <span style={{ color: stateColor[text.activityStatus].color }}>
            {stateColor[text.activityStatus].name}
          </span>
        );
      },
    },
    {
      title: '操作',
      key: 'activityBasicId',
      render: (text, record) => {
        // *------------------------------------------
        // todo 这是详情按钮
        const activityDetails = () => {
          history.push({
            pathname: `/activityDetails`,
            search: `id=${record.id}`,
            state: {
              activityBasicId: record.activityBasicId,
            },
          });
        };
        // *------------------------------------------
        // todo 这是弹出确认框
        const [isModalVisible, setIsModalVisible] = useState(false);
        const deleteActivity = async () => {
          setIsModalVisible(true);
        };
        const handleOk = async () => {
          setIsModalVisible(false);
          // todo 这是删除活动
          AfterDeleting(record);
        };

        const handleCancel = () => {
          setIsModalVisible(false);
        };
        return (
          <Space size="middle">
            {(text.activityStatus == 1 ||
              text.activityStatus == 4 ||
              text.activityStatus == 5 ||
              text.activityStatus == 6) &&
              !text.isDraft && <a onClick={activityDetails}>详情</a>}
            {text.isDraft && (
              <a
                onClick={() => {
                  editActivity(record);
                }}
              >
                编辑
              </a>
            )}
            {text.activityStatus == 4 && <a>重新发布</a>}
            {(text.activityStatus == 5 ||
              text.isDraft ||
              text.activityStatus == 4 ||
              text.activityStatus == 6) && <a onClick={deleteActivity}>删除</a>}
            {!text.activityStatus == 4 && !text.isDraft && <a>关闭</a>}
            <Modal
              title="你真的确定吗"
              visible={isModalVisible}
              onOk={handleOk}
              onCancel={handleCancel}
            >
              <p>确认删除活动吗？</p>
            </Modal>
          </Space>
        );
      },
    },
  ];

  return (
    <Table
      columns={columns}
      dataSource={list}
      rowKey={(text) => text.activityBasicId}
      pagination={paginationProps}
    />
  );
}
